<template>
  <div class="conainer">
    <h1>{{ details.moduleName }}</h1>
    <image-preview
      v-if="details.moduleLogo"
      :src="details.moduleLogo"
      class="image"
    />

    <div
      v-html="details.moduleIntro"
      style="
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        width: 800px;
      "
    ></div>
  </div>
</template>

<script>
import { getModule } from "@/api/system/module";

export default {
  name: "Product",
  data() {
    return {
      details: {},
    };
  },
  mounted() {
    console.log(this.$route.params.id);
    getModule(this.$route.params.id).then((response) => {
      console.log(response, "response");
      this.details = response.data;
      console.log(this.details);
    });
  },
  methods: {
    toProduct(e) {
      console.log(e);
    },
  },
};
</script>
<style lang="scss" scoped>
.conainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .image {
    width: 800px;
    height: 600px;
    display: block;
  }
}
</style>
